<template>
  <div class="task-detail-wrapper">
    <span class="tip">应生成任务总数：{{ statisticData.totalTasks }}</span>
    <div class="top">
      <div class="top-item">
        <div class="top-item-left">
          <div class="top-item-left-icon icon2"></div>
          <span>已生成任务</span>
        </div>
        <div class="top-item-right">
          <span class="num">{{ statisticData.totalTasksWithoutFuture }}</span>
          <span class="unit">项</span>
        </div>
      </div>
      <div class="top-item">
        <div class="top-item-left">
          <div class="top-item-left-icon icon3"></div>
          <span>已完成任务</span>
        </div>
        <div class="top-item-right">
          <span class="num">{{ statisticData.completedTasks }}</span>
          <span class="unit">项</span>
        </div>
      </div>
      <div class="top-item">
        <div class="top-item-left">
          <div class="top-item-left-icon icon4"></div>
          <span>未完成任务</span>
        </div>
        <div class="top-item-right">
          <span class="num">{{ statisticData.uncompletedTasks }}</span>
          <span class="unit">项</span>
        </div>
      </div>
      <div class="top-item">
        <div class="top-item-left">
          <div class="top-item-left-icon icon5"></div>
          <span>进行中任务</span>
        </div>
        <div class="top-item-right">
          <span class="num">{{ statisticData.inprogressTasks }}</span>
          <span class="unit">项</span>
        </div>
      </div>
      <div class="top-item">
        <div class="top-item-left">
          <div class="top-item-left-icon icon1"></div>
          <span>完成率</span>
        </div>
        <div class="top-item-right">
          <span class="num">{{
            (
              (statisticData.completedTasks /
                statisticData.totalTasksWithoutFuture) *
              100
            ).toFixed(2)
          }}</span>
          <span class="unit">%</span>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table class="custom-table" :data="tableData">
        <el-table-column type="index" label="序号" width="60px" />
        <el-table-column prop="name" label="巡检任务名称" />
        <el-table-column prop="beginTime" label="任务时间">
          <template #default="scope">
            {{ moment(scope.row.beginTime).format('YYYY-MM-DD') }} -
            {{ moment(scope.row.endTime).format('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column prop="operateUserNames" label="巡检人员" />
        <el-table-column prop="completedTime" label="完成时间">
          <template #default="scope">
            {{
              scope.row.completedTime
                ? moment(scope.row.completedTime).format('YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="任务状态">
          <template #default="scope">
            <el-tag :type="getDictStyle('task_status', scope.row.status)">{{
              getDictValue('task_status', scope.row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160px">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="
                handleDetail({ pkid: scope.row.pkid }, 'taskManageDetail', true)
              "
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        class="custom-pagination"
        :current-page="paginationParams.pageIndex"
        :page-size="paginationParams.pageSize"
        background
        :page-sizes="[10, 20, 30, 50]"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="initTableList"
      />
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import {
  getPlanStatistics,
  getTaskList,
} from '@/api/manager/inspectionManage/taskManage.js'
import moment from 'moment'
import { useDict } from '@/hooks/useDict'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const { dict, getDictStyle, getDictValue } = useDict([])

const router = useRouter()
const route = useRoute()
const searchParams = ref({})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDetail,
  searchFromRef,
} = useTableList(searchParams, getTaskList)

const statisticData = ref({
  totalTasks: 0,
  completedTasks: 0,
  uncompletedTasks: 0,
  inprogressTasks: 0,
  totalTasksWithoutFuture: 0,
})

const initStatisticData = async () => {
  const res = await getPlanStatistics({ planId: route.query.pkid })
  if (!res.success) {
    ElMessage.error(res.message)
    return
  }
  statisticData.value = res.data
}

onMounted(() => {
  if (route.query.pkid) {
    searchParams.value.planId = route.query.pkid
    initTableList(1)
    initStatisticData()
  }
})
</script>
<style lang="scss" scoped>
.task-detail-wrapper {
  width: 100%;
  .tip {
    position: absolute;
    right: 30px;
    top: 70px;
  }
  .top {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    &-item {
      width: 300px;
      height: 64px;
      background: #f3f7fe;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 20px;
      margin-right: 19px;
      &:last-child {
        margin-right: 0;
      }
      &-left {
        display: flex;
        align-items: center;
        &-icon {
          width: 26px;
          height: 26px;
          margin-right: 10px;
        }
        span {
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }
        .icon1 {
          background: url('@/assets/imgs/manager/rwzs.png') no-repeat;
          background-size: 100% 100%;
        }
        .icon2 {
          background: url('@/assets/imgs/manager/csrw.png') no-repeat;
          background-size: 100% 100%;
        }
        .icon3 {
          background: url('@/assets/imgs/manager/ywcrw.png') no-repeat;
          background-size: 100% 100%;
        }
        .icon4 {
          background: url('@/assets/imgs/manager/wwcrw.png') no-repeat;
          background-size: 100% 100%;
        }
        .icon5 {
          background: url('@/assets/imgs/manager/wcl.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      &-right {
        display: flex;
        align-items: flex-end;
        .num {
          font-weight: 400;
          font-size: 20px;
          color: #000000;
          margin-right: 5px;
        }
        .unit {
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: auto;
  }
  .page {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
